<template>
    <div class="login">
        <img class="logo" src="@assets/logo.png" alt="">
        <div class="input-text">
            <img src="@assets/pass.png" alt="">
            <input type="text" v-model="username" placeholder="手机号码/邮箱号">
        </div>
        <div class="input-text">
            <img src="@assets/user.png" alt="">
            <input type="password" v-model="password" placeholder="密码" maxlength="20">
        </div>
        <div class="tips">
            <div v-if="errText">
                *{{errText}}
            </div>
        </div>
        <button class="submit" @click="handleSubmit" @keyup.enter="handleSubmit">
            登录
        </button>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                username: '',
                password: '',
                errText: ''
            }
        },
         created() {
            let self = this
             document.onkeydown = function (event) {
                console.log(1111)
                 var e = event || window.event;
                 if (e && e.keyCode == 13) { //回车键的键值为13
                     self.handleSubmit()
                 }
             }
		 },
        methods: {
            handleSubmit() {
                /*let re= /select|update|delete|exec|count|’|"|=|;|>|<|%/i;
                if (re.test(this.password) || re.test(this.username)) {
                    this.errText = '请您不要输入特殊字符和SQL关键字！'
                }*/
                let username = this.username
                let password = this.password
                let regPhone = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
                let regEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
                // if (regPhone.test(username) || regEmail.test(username)) {
                if (!username.length) {
                    this.errText = '请输入手机号或者邮箱'
                    return
                }
                if (!password.length) {
                    this.errText = '请输入密码'
                } else if (password.length < 6) {
                    this.errText = '密码不能小于6位'
                } else {
                    this.errText = ''
                    this.initData(username, password)
                }
                /* } else {
					 this.errText = '请输入正确的手机号或者邮箱'
				 }*/
            },
            initData(username, password) {
                this.$axios({actionName: 'login.pwd', loginId: username, pwd: password}).then(res => {
                    if (res) {
                        window.location.reload()
                    }
                }).catch(err => {
                    this.errText = err.msg
                })
            },
        }
    }
</script>

<style scoped lang="less">
    .login {
        position: absolute;
        top: 50%;
        left: 50%;
        padding: 26px 70px 40px;
        transform: translate(-50%, -50%);
        width: 460px;
        height: 370px;
        background-color: #fff;
        border-radius: 8px;
        
        .logo {
            display: block;
            width: 98px;
            height: 48px;
            margin: 0 auto;
        }
        
        .input-text {
            .flexed(flex-start);
            width: 320px;
            height: 52px;
            margin-top: 16px;
            border-bottom: 2px solid rgba(0, 0, 0, .04);
            
            input::-webkit-input-placeholder {
                font-size: 14px;
                font-weight: 400;
                color: rgba(0, 0, 0, .4);
            }
            
            input::-moz-placeholder {
                font-size: 14px;
                font-weight: 400;
                color: rgba(0, 0, 0, .4);
            }
            
            input:-ms-input-placeholder {
                font-size: 14px;
                font-weight: 400;
                color: rgba(0, 0, 0, .4);
            }
            
            input:-webkit-autofill {
                -webkit-box-shadow: 0 0 0 1000px white inset;
                -webkit-text-fill-color: #333;
            }
            
            img {
                width: 14px;
                height: auto;
                margin: 0 13px;
            }
            
            input {
                width: 270px;
                height: 100%;
                border: none;
                outline: none;
            }
        }
        
        .tips {
            height: 17px;
            line-height: 17px;
            margin-top: 8px;
            font-size: 12px;
            font-weight: 400;
            color: rgba(224, 32, 32, 1);
        }
        
        .submit {
            display: block;
            width: 320px;
            height: 50px;
            margin-top: 23px;
            background: rgba(255, 220, 32, 1);
            border-radius: 4px;
            outline: none;
            border: none;
            text-align: center;
            line-height: 50px;
            font-size: 18px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
            cursor: pointer;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            user-select: none;
        }
    }
</style>
